<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div id="app" >
    
    <std-com></std-com>
    <std-com2></std-com2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
    var eventHub=new Vue();

    var std_com={
        data:function(){
            return{
                sex:''
            }
        },
        template:`<div>组件A：
            <div><input type='radio' value='女' @change='handle()' v-model="sex">女</div>
            <div><input type='radio' value='男' @change='handle()' v-model="sex">男</div>
            </div>`,

        methods: {
            handle:function(){
                eventHub.$emit('change',this.sex)
            }
        }
    }
    Vue.component("std-com",std_com)


    var std_com2={
        data:function(){
            return {
                msg:''
            }
        },
        template:`<div>组件B：
            <input type="text" v-model="msg"></div>`,
        mounted:function () {
            eventHub.$on('change', val=>{
                this.msg=val
            })
        }
    }
    Vue.component("std-com2",std_com2)


    new Vue({
        el: '#app'
    })
</script>
</body>
</html>